<!-- 商品列表 -->
<template>
	<view class="list-box">
		<view class="head-box">
			<!-- 标题栏 -->
			<ljshop-navbar>
				<view class="u-flex-1 u-flex u-col-center u-m-x-20" slot="content">
					<u-search placeholder="请输入关键字" @change="onSearch" @search="onSearch" @clear="clearSearch"
						v-model="searchVal" :showAction="false" height="60" :disabled=true  @tap="$Router.push('/pages/public/search')"></u-search>
				</view>
			</ljshop-navbar>
			<!-- 筛选栏 -->
			<!-- <sh-filter @change="onFilter"></sh-filter> -->
		</view>
          <!-- #ifdef APP-PLUS   -->
		<view class="hot-goods u-m-b-10 u-p-x-16" style="margin-top: 70rpx;" >
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN || H5-->
				<view class="hot-goods u-m-b-10 u-p-x-16">
				<!-- #endif -->
          <view class="big-goods  u-flex u-p-20 u-col-top u-m-b-16" v-for="item in goodsList" :key="item.id"
                @tap="jump('/pages/goods/detail', { id: item.id })">
            <image class="goods-img" :src="item.thumbnail || 'https://image.hzwltb69.com/app/date/2023/lodingLogo.png'" ></image>
            <view class=" card-right u-m-l-20 u-flex-col u-row-between">
              <view class="">
                <view class="goods-title u-m-t-10 u-m-b-10">
                  {{ item.name }}
                </view>
                <view
                    style="font-size: 24rpx;
                    color: #a6a6a6;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    width: 300rpx;overflow: hidden">{{item.caption || ''}}</view>
                <view class="subtitle-text u-m-b-10">{{ item.subtitle?item.subtitle:"" }}</view>
              </view>
              <view class="u-flex u-m-y-10 u-row-between">
                <!-- <view class="progress-text">补贴￥{{ ((item.price-item.cost)* item.rebate/100).toFixed(2)}}</view> -->
              </view>

              <view class=" u-flex u-row-between u-col-center shop-box">
                <view class="u-flex u-col-bottom">
                  <view class="price u-m-r-10">￥{{ item.price }}</view>
                  <view class="origin-price">
                  </view>
                </view>
                <button class="u-reset-button buy-btn">立即抢购</button>
              </view>
            </view>
          </view>
			<!--<button v-show="total > perPage" class="u-reset-button refresh-btn u-m-y-20 u-flex u-col-center u-row-center"
				@tap.stop="loadMore">
				<text class="u-m-r-6 u-iconfont uicon-reload" style="font-size: 28rpx;color: #999"
					:class="{ 'refresh-active': isRefresh }"></text>
				{{ listParams.page >= lastPage ? '收起' : '加载更多' }}
		 </button> -->
		</view>

		<!-- 缺省页 -->
		<ljshop-empty v-if="isEmpty" :image="'https://image.hzwltb69.com/app/images/nogoods.png'" tipText="暂无该商品，还有更多好货等着你噢~">
		</ljshop-empty>
		<!-- 加载更多 -->
		<!-- <u-loadmore v-show="hasMroe" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" /> -->
		<!-- 登录弹窗 -->
		<view class="upward" v-if="isShow"	@click="pullTop()"> <u-icon name="arrow-upward"	color="#999" size="28"> </u-icon></view>

	</view>
  </view>
</template>

<script>
	import shFilter from './components/sh-filter.vue';
	import {
		mapMutations,
		mapActions,
		mapState
	} from 'vuex';
	let systemInfo = uni.getSystemInfoSync();
	let historyTag = uni.getStorageSync('searchHistoryArr') ? JSON.parse(uni.getStorageSync('searchHistoryArr')) : [];
	export default {
		components: {
			shFilter
		},
		data() {
			return {
				isShow: false,
				isEmpty: false,
				goodsList: [],
				searchVal: '',
				categoryId: 0,
				page: 1,
				loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
				lastPage: 0,
				// 瀑布流 350-330
				addTime: 0, //排序间隙时间
				leftHeight: 0,
				rightHeight: 0,
				leftList: [],
				rightList: [],
				tempList: [],
				hasMroe: true,
				order: '',
				rebate:0,
				isAdding:false

			};
		},
		// 触底加载更多
		onReachBottom() {
			this.page += 1;
			this.getGoodsList();
		},
		onLoad() {
			if (this.$Route.query.id) {
				this.categoryId = this.$Route.query.id;
				this.getGoodsList();
			} else if (this.$Route.query.hasOwnProperty('keywords')) {
				this.keywords = this.$Route.query.keywords;
				this.searchVal = this.$Route.query.keywords;
				!this.$Route.query.keywords && this.getGoodsList();
			} else {
				this.getGoodsList();
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 500) {
				this.isShow = true;
			} else {
				this.isShow = false;
			}
		},
		methods: {
      jump(path, parmas) {
        this.$Router.push({
          path: path,
          query: parmas
        });
      },
			pullTop() {
				uni.pageScrollTo({
					scrollTop: 0, //滚动到距离顶部为0
					duration: 500 //滚动时长
				})
			},
			// 瀑布流相关
			async splitData() {
				if (!this.tempList.length){
					this.isAdding = false
					return;
				}
				if(this.tempList.length==1){
					this.isAdding = false
				}
				let item = this.tempList[0];
				if (!item) return;

				// 分左右
				if (this.leftHeight < this.rightHeight) {
					this.leftHeight += 330;
					this.leftList.push(item);
				} else if (this.leftHeight > this.rightHeight) {
					this.rightHeight += 330;
					this.rightList.push(item);
				} else {
					this.leftHeight += 330;
					this.leftList.push(item);
				}

				// 移除临时列表的第一项，如果临时数组还有数据，继续循环
				this.tempList.splice(0, 1);
				if (this.tempList.length) {
					setTimeout(() => {
						this.splitData();
					}, this.addTime);
				}
			},
			clear() {
				this.leftList = [];
				this.rightList = [];
				this.leftHeight = 0;
				this.rightHeight = 0;
				this.tempList = [];
			},

			onFilter(e) {
				this.order = e;
				this.goodsList = [];
				this.page = 1;
				this.lastPage = 1;
				this.clear();
				this.$u.debounce(this.getGoodsList);
			},
			// 键盘搜索,输入搜索
			onSearch() {
				this.goodsList = [];
				this.page = 1;
				this.lastPage = 1;
				this.keywords = this.searchVal;
				this.clear();
				this.$u.debounce(this.getGoodsList);
			},

			// 队列
			getArr(list, item) {
				let arr = list;
				let length = 10; //队列长度
				arr.length < length ? arr.unshift(item) : arr.pop();
				return arr;
			},

			// 清除搜索框
			clearSearch() {
				this.searchVal = '';
				this.clear();
			},
			// 商品列表
			getGoodsList() {
				let that = this;
				that.loadStatus = 'loading';
				this.isAdding = true
				//console.info(that.keywords)
				//console.info(that.page)
				//console.info(that.order)
				let defaultOrder = 0;
				let priceOrder = 0;
				let salesOrder = 0;
				let newProdcutOrder = 0;
				if (that.order) {
					defaultOrder = that.order.defaultOrder;
					priceOrder = that.order.priceOrder;
					salesOrder = that.order.salesOrder;
					newProdcutOrder = that.order.newProdcutOrder;
				}
				uni.showLoading({})
				that.$http('goods.cateList', {
          productCategoryId: that.categoryId,
					current: that.page,
          pageSize:20
				}).then(res => {
          // that.goodsList = res.data
						if(that.page == 0 && res.data.length == 0){
							that.isEmpty =true
						}
						if(res.data.length < 20){
							that.loadStatus="nomore"
						}
						if (res.data.length > 0) {
							if (that.page == 1) {
								// this.rebate = res.rebate
								this.hasMroe = true;
								that.goodsList = res.data;
							} else {
								that.goodsList = that.goodsList.concat(res.data)
							}
							if(res.data.length < 10){
								this.hasMroe = false;
							}
						} else if(that.page > 0){
							this.hasMroe = false;
						}
				});
			}
		}
	};
</script>

<style lang="scss">
	@mixin vue-flex($direction: row) {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: $direction;
		/* #endif */
	}

	.u-waterfall {
		@include vue-flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.u-column {
		@include vue-flex;
		flex: 1;
		flex-direction: column;
		height: auto;
	}

	.head-box {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 998;
		background: #fff;
	}
	.u-waterfall{
		/* #ifdef MP-WEIXIN */
		margin-top: 180rpx;
		/* #endif */
		/* #ifdef H5 */
		margin-top: 105rpx;
		/* #endif */
		/* #ifdef APP-PLUS */
		margin-top: 114rpx;
		/* #endif */
	}
  .hot-goods{
    /*  #ifdef  APP-PLUS || H5  */
    padding-top: 100rpx;
        /*  #endif  */
    /*  #ifdef  MP-WEIXIN  */
    padding-top: 180rpx;
        /*  #endif  */

  }
  .big-goods {
    width: 710rpx;
    margin-left: 8rpx;
    min-height: 240rpx;
    background: #ffffff;
    //box-shadow: 0px 7rpx 8rpx 1rpx rgba(254, 76, 29, 0.05);
    border-radius: 20rpx;
    position: relative;
    .shop-box{
      position: absolute;
      bottom: 15rpx;
      right: 20rpx;
      width: 450rpx;
    }
    .goods-img {
      width: 200rpx;
      height: 200rpx;
      border-radius: 6rpx;
    }

    .card-right {
      width: 330rpx !important;
      height: 100%;
    }

    .goods-title {
      font-size: 30rpx;
      // font-weight: 600;
      height: 78rpx;
      width: 460rpx;
      color: #242424;
      display: -webkit-box;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      font-family: "Microsoft YaHei UI";

    }

    .subtitle-text {
      font-size: 22rpx;
      width: 350rpx;
      font-weight: 500;
      color: #666666;
    }

    .buy-btn {
      width: 140rpx;
      line-height: 60rpx;
      background: #fa4d44;
      border-radius: 35rpx;
      font-size: 26rpx;
      font-weight: 500;
      color: #ffffff;
    }

    .progress-text {
      color: #333;
      font-size: 20rpx;

      padding: 8rpx;
      border-radius: 10rpx;
    ;

    }

    // 价格
    .price {
      color: #ff0000;
      font-weight: 600;

      &::before {

        font-size: 20rpx;
      }
    }

    .origin-price {
      color: #c4c4c4;
      font-size: 24rpx;

      &::before {

        font-size: 20rpx;
      }
    }
  }
</style>
